<script setup lang="ts">
import { ref } from 'vue';
// 导入本地资源，类似鸿蒙的 $r()
import lightOff from './assets/light_off.svg'
import lightOn from './assets/light_on.svg'

const isOn = ref(false)
const changeImage = () => {
  isOn.value = !isOn.value
}
</script>


<template>
  <button @click="changeImage()">点击切换</button>
  <!-- 
    属性动态绑定语法
      1. 属性前面添加 v-bind: 实现属性的动态绑定
      2. v-bind 可省略，保留冒号 : 即可 
   -->

  <!-- 三元表达式：动态绑定资源 -->
  <img :src="isOn ? lightOn : lightOff" alt="">
  <!-- 三元表达式：动态绑定类名 -->
  <p :class="isOn ? 'isActive' : ''">{{ isOn }}</p>
  <!-- 对象的写法绑定类名：{ 类名: 条件 }，如果条件为真就添加类名 -->
  <p :class="{ isActive: isOn }">{{ isOn }}</p>
  <!-- :style 动态绑定样式，传入样式对象 -->
  <p :style="{ backgroundColor: isOn ? 'red' : '' }">动态绑定 style</p>
</template>

<style>
.isActive {
  background-color: gold;
}
</style>
